<template>
  <div class="play_list">
    <div class="title">正在播放</div>
    <div class="song_list now_music">
      <div class="item active_position">
        <div class="iconfont icon-bofang num"></div>
        <div class="name">{{ musicDetail.name }}</div>
        <div class="album">
          <span @click="toSingerDetail(musicDetail.ar[0].id)">{{
            musicDetail.ar[0].name
          }}</span>
        </div>

        <div class="btn">
          <el-button
            @click="toDetail(musicDetail.mv)"
            size="mini"
            v-if="musicDetail.mv != 0"
            type="primary"
            >mv</el-button
          >
        </div>
        <div class="timer">{{ musicDetail.dt | timerFormat }}</div>
      </div>
    </div>
    <div class="title">即将播放</div>

    <div class="song_list">
      <div
        @dblclick="startSong(item)"
        :class="{ active_position: item.id === songId }"
        v-for="(item, index) in playList.slice(listIndex)"
        :key="index"
        class="item"
      >
        <div class="num">{{ index + 1 }}</div>
        <div class="name">{{ item.name }}</div>
        <div class="album">
          <span @click="toSingerDetail(item.ar[0].id)">{{
            item.ar[0].name
          }}</span>
        </div>

        <div class="btn">
          <el-button
            @click="toDetail(item.mv)"
            size="mini"
            v-if="item.mv != 0"
            type="primary"
            >mv</el-button
          >
        </div>
        <div class="timer">{{ item.dt | timerFormat }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "Playlist",
  data() {
    return {
      index: 0,
    };
  },
  watch: {
    // songId(newVal) {
    //   let ids = this.playList.map((v => v.id));
    //   console.log(ids.indexOf(newVal));
    //   this.index = ids.indexOf(newVal)+1;
    // },
  },
  created() {},
  computed: {
    ...mapGetters("musicPlay", [
      //当前播放歌曲id
      "songId",
      //是否在播放
      "isPlaying",
      "hasPlayList",
      "playList",
      "musicDetail",
      "listIndex",
    ]),
  },

  methods: {
    //播放歌曲
    async startSong(musicDetail) {
      //保存当前播放列表
      this.$store.dispatch("musicPlay/savePlayList", this.playList);

      sessionStorage.setItem("playList", JSON.stringify(this.playList));

      //保存播放状态
      this.$store.dispatch("musicPlay/saveIsPlaying", "true");

      //保存当前歌曲id
      this.$store.dispatch("musicPlay/saveSongId", musicDetail.id);
      sessionStorage.setItem("songId", musicDetail.id);
    },
    //跳转到歌手详情
    toSingerDetail(id) {
      this.$router.push("/singerInfo/" + id);
    },
    //去视频界面
    toDetail(id) {
      this.$store.dispatch("musicPlay/saveIsPlaying", "false");

      this.$router.push("/mvDetail/" + id);
    },
  },
};
</script>

<style lang="less" scoped>
.play_list {
  padding: 1rem 8.5rem;
  .title {
    margin-left: 10px;
    font-size: 35px;
    font-weight: 600;
  }
  .now_music {
    margin-bottom: 30px;
  }
  .song_list {
    margin-top: 20px;
    .item {
      height: 50px;
      display: flex;
      align-items: center;
      border-radius: 8px;
      padding: 0 5px;
      &:hover {
        background-color: #f2f2f4;
      }
      .num {
        width: 50px;
        text-align: center;
        font-size: 16px;
        //   font-weight: 600;
      }
      .name {
        width: 40%;
        font-size: 18px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .album {
        flex: 1;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        span:hover {
          text-decoration: underline;
        }
      }
      .btn {
        font-size: 15px;
        font-weight: 600;
        width: 10%;
        color: #335eea;
        &:hover .el-button {
          transform: scale(1.1);
        }
        .el-button {
          margin-left: 6px;
          background-color: #fff;
          color: rgb(16, 24, 134);
          font-weight: 600;
          border: none;
          border-radius: 5px;
        }
        i {
          &:hover {
            transform: scale(1.1);
          }
        }
      }
      .timer {
        width: 50px;
        text-align: center;
        font-size: 18px;
        color: rgb(167, 157, 157);
      }
    }
    .active_position {
      color: #335eea;
      background: #eaeffd;

      .num {
        color: #335eea;
      }
      .album,
      .name,
      .timer {
        color: #335eea;
      }
    }
  }
}
</style>